<script setup lang="ts">
import { useAuthStore } from '@/store/auth'
import { useAppStore } from '@/store/app'

const router = useRouter()
const authStore = useAuthStore()
const appStore = useAppStore()

const {
  theme,
  toggleTheme,
  currentThemeColor,
  showThemeColorSheet,
  themeColorOptions,
  openThemeColorPicker,
  closeThemeColorPicker,
  selectThemeColor,
} = useTheme()

const isDark = computed({
  get() {
    return theme.value === 'dark'
  },
  set() {
    toggleTheme()
  },
})

// 页面跳转方法
function navigateTo(name: string) {
  router.push({
    name,
  })
}

// 跳转到平台信息演示页面
function navigateToPlatformDemo() {
  uni.navigateTo({
    url: '/pages/demo/platform-demo',
  })
}

// 处理主题色选择
function handleThemeColorSelect(option: any) {
  selectThemeColor(option)
}

function openUrl(url: string) {
  window.open(url, '_blank')
}

// 退出登录
async function handleLogout() {
  const confirmed = await appStore.showConfirm({
    title: '确认退出',
    content: '确定要退出登录吗？',
    confirmText: '退出',
    cancelText: '取消',
  })

  if (confirmed) {
    await authStore.logout()
  }
}

// 页面加载时检查登录状态
onLoad(() => {
  if (!authStore.isLoggedIn) {
    uni.reLaunch({
      url: '/pages/auth/login',
    })
  }
})
</script>

<template>
  <view class="box-border py-3">
    <!-- 管理员信息卡片 -->
    <view class="mx-3 box-border rounded-3 bg-white px-4 py-6 dark:bg-[var(--wot-dark-background2)]">
      <view class="mb-4 flex items-center justify-between">
        <view class="flex items-center gap-3">
          <image
            v-if="authStore.adminAvatar"
            :src="authStore.adminAvatar"
            class="h-12 w-12 rounded-full"
            mode="aspectFill"
          />
          <view v-else class="h-12 w-12 flex items-center justify-center rounded-full bg-gray-200">
            <wd-icon name="user" size="24px" color="#666" />
          </view>
          <view>
            <text class="block text-5 text-gray-800 font-bold dark:text-gray-200">
              {{ authStore.adminNickname }}
            </text>
            <text class="block text-3 text-gray-500 dark:text-gray-400">
              {{ authStore.adminRoles.join(', ') || '管理员' }}
            </text>
          </view>
        </view>
        <wd-button size="small" type="danger" @click="handleLogout">
          退出登录
        </wd-button>
      </view>
    </view>

    <view class="mx-3 box-border rounded-3 bg-white px-4 py-6 text-center dark:bg-[var(--wot-dark-background2)]">
      <text class="mb-3 block text-left text-5 text-gray-800 font-bold dark:text-gray-200">
        淘辰蒂培训管理系统
      </text>
      <text class="mb-3 block text-left text-30rpx text-gray-600 leading-relaxed dark:text-gray-300">
        ⚡️ 专业的培训班管理系统，提供完整的培训管理解决方案
      </text>
      <text class="block text-left text-3 text-gray-400 leading-relaxed dark:text-gray-400">
        欢迎使用淘辰蒂培训管理系统，祝您工作愉快！
      </text>
    </view>

    <demo-block title="基础设置" transparent>
      <wd-cell-group border custom-class="rounded-2! overflow-hidden">
        <wd-cell title="暗黑模式">
          <wd-switch v-model="isDark" size="18px" />
        </wd-cell>
        <wd-cell title="选择主题色" is-link @click="openThemeColorPicker">
          <view class="flex items-center justify-end gap-2">
            <view
              class="h-4 w-4 rounded-full"
              :style="{ backgroundColor: currentThemeColor.primary }"
            />
            <text>{{ currentThemeColor.name }}</text>
          </view>
        </wd-cell>
      </wd-cell-group>
    </demo-block>

    <demo-block title="工具链介绍" transparent>
      <wd-cell-group border custom-class="rounded-2! overflow-hidden">
        <wd-cell title="📱 平台信息演示" is-link @click="navigateToPlatformDemo" />
        <wd-cell title="🧩 WotUI组件库" is-link @click="openUrl('https://wot-design-uni.cn/')" />

        <wd-cell title="🚦 Router 路由管理" is-link @click="navigateTo('router')" />
        <wd-cell title="🌐 Alova 网络请求" is-link @click="navigateTo('request')" />
        <wd-cell title="🎨 Icon 图标" is-link @click="navigateTo('icon')" />
        <wd-cell title="✨ Unocss 原子化" is-link @click="navigateTo('styles')" />
        <wd-cell title="🍍 Pinia 持久化" is-link @click="navigateTo('pinia')" />
        <wd-cell title="💬 Fedback 反馈组件" is-link @click="navigateTo('feedback')" />
        <wd-cell title="🌱 CreateUni 脚手架" is-link @click="navigateTo('create-uni') " />

        <wd-cell title="🔄 CI/CD 持续集成" is-link @click="navigateTo('ci')" />
      </wd-cell-group>
    </demo-block>

    <!-- 主题色选择 ActionSheet -->
    <wd-action-sheet
      v-model="showThemeColorSheet"
      title="选择主题色"
      :close-on-click-action="true"
      @cancel="closeThemeColorPicker"
    >
      <view class="px-4 pb-4">
        <view
          v-for="option in themeColorOptions"
          :key="option.value"
          class="flex items-center justify-between border-b border-gray-100 py-3 last:border-b-0 dark:border-gray-700"
          @click="handleThemeColorSelect(option)"
        >
          <view class="flex items-center gap-3">
            <view
              class="h-6 w-6 border-2 border-gray-200 rounded-full dark:border-gray-600"
              :style="{ backgroundColor: option.primary }"
            />
            <text class="text-4 text-gray-800 dark:text-gray-200">
              {{ option.name }}
            </text>
          </view>
          <wd-icon
            v-if="currentThemeColor.value === option.value"
            name="check"
            :color="option.primary"
            size="20px"
          />
        </view>
      </view>
      <wd-gap :height="50" />
    </wd-action-sheet>
  </view>
</template>

<route lang="json">
{
  "name": "home",
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "首页"
  }
}
</route>
